<template>
  <a-layout>
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      breakpoint="lg"
      collapsed-width="80"
      width="240"
    >
      <a-layout-header class="header-title">
        <div class="title">
          <img src="../assets/logo.png" alt />
          <a href="#" v-if="!collapsed">XXX后台管理系统</a>
        </div>
      </a-layout-header>
      <a-menu
        :default-selected-keys="['1']"
        :default-open-keys="['2']"
        mode="inline"
        theme="dark"
        :inline-collapsed="collapsed"
        :inlineIndent="10"
      >
        <template v-for="item in list">
          <a-menu-item v-if="!item.children" :key="item.key">
            <a-icon type="pie-chart" />
            <span>{{ item.title }}</span>
          </a-menu-item>
          <sub-menu v-else :key="item.key" :menu-info="item" />
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="top-header">
        <div class="button-operation">
          <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapsed" />
        </div>
        <div class="user-info">
          <img src="../assets/logo.png" alt />
          <a href="#">
            <strong>哈拉123123</strong>
          </a>
          <a-icon class="language" type="global" />
        </div>
      </a-layout-header>
      <a-breadcrumb>
        <a-breadcrumb-item href>
          <a-icon type="home" />
        </a-breadcrumb-item>
        <a-breadcrumb-item href>
          <a-icon type="user" />
          <span>Application List</span>
        </a-breadcrumb-item>
        <a-breadcrumb-item>Application</a-breadcrumb-item>
      </a-breadcrumb>
      <a-layout-content>
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import { Layout, Menu, Icon, Breadcrumb } from "ant-design-vue"
const SubMenu = {
  template: `
      <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
        <span slot="title">
          <a-icon type="mail" /><span>{{ menuInfo.title }}</span>
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children" :key="item.key">
            <a-icon type="pie-chart" />
            <span>{{ item.title }}</span>
          </a-menu-item>
          <sub-menu v-else :key="item.key" :menu-info="item" />
        </template>
      </a-sub-menu>
    `,
  name: "SubMenu",
  // must add isSubMenu: true
  isSubMenu: true,
  components: {
    ASubMenu: Menu.SubMenu,
    AMenuItem: Menu.Item,
    AIcon: Icon,
  },
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
}
export default {
  components: {
    ALayout: Layout,
    ALayoutHeader: Layout.Header,
    ALayoutSider: Layout.Sider,
    ALayoutContent: Layout.Content,
    AMenu: Menu,
    AMenuItem: Menu.Item,
    AIcon: Icon,
    ABreadcrumb: Breadcrumb,
    ABreadcrumbItem: Breadcrumb.Item,
    "sub-menu": SubMenu,
  },
  data() {
    return {
      collapsed: false,
      list: [
        {
          key: "1",
          title: "Option 1",
        },
        {
          key: "2",
          title: "Navigation 2",
          children: [
            {
              key: "2.1",
              title: "Navigation 3",
              children: [{ key: "2.1.1", title: "Option 2.1.1" }],
            },
          ],
        },
      ],
    }
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed
    },
  },
}
</script>
<style lang="less" scoped>
.ant-layout-content {
  height: calc(100vh - 64px);
}
.ant-layout-header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
}
.ant-layout-sider {
  box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
}
.ant-breadcrumb {
  height: 25px;
  line-height: 25px;
  margin-left: 10px;
}
.header-title {
  padding: 0;
  background-color: rgba(0, 0, 0, 0);
  text-align: center;
  .title {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    img {
      width: 40px;
      height: 40px;
    }
    a {
      color: #fff;
    }
  }
}
.top-header {
  width: 100%;
  padding: 0;
  padding-right: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .button-operation {
    font-size: 20px;
    width: 65px;
    height: 100%;
    text-align: center;
    transition: 0.6s;
    cursor: pointer;
  }
  .button-operation:hover {
    background-color: rgba(0, 0, 0, 0.025);
  }
  .user-info {
    img {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
      margin-right: 8px;
    }
    .language {
      font-size: 20px;
      margin-left: 20px;
      vertical-align: -0.225em;
      color: #adadad;
      cursor: pointer;
    }
  }
}
</style>